<template>
	<view class="app app-bg">
		<u-cell-group>
			<u-cell-item :title="$t('avatar')" @click="updateAvatar">
				<view style="display: flex; justify-content: flex-end">
					<u-image
						border-radius="20"
						mode="aspectFill"
						class="avatar"
						height="100"
						width="100"
						:fade="false"
						:src="vk.getVuex('$user.userInfo.avatar')"
					></u-image>
				</view>
			</u-cell-item>
			<u-cell-item
				title="昵称"
				:value="vk.getVuex('$user.userInfo.nickname') || '点击设置'"
				@click="updateNickname"
			></u-cell-item>
		</u-cell-group>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// init请求返回的数据
			data: {},
			// 表单请求数据
			form1: {},
			scrollTop: 0
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	onLoad(options = {}) {
		this.options = options
		this.init(options) 
	}, 
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options) {
			uni.setNavigationBarTitle({
				title: this.$t("page.personal-information")
			})
		},
		pageTo(path) {
			vk.navigateTo(path)
		},
		updateNickname() {
			let that = this
			vk.prompt(
				"请输入昵称",
				"提示",
				"确定",
				"取消",
				res => {
					if (res.confirm) {
						let nickname = res.content
						that.updateUserBaseInfo({ nickname })
					}
				},
				vk.getVuex("$user.userInfo.nickname")
			)
		},
		updateUserBaseInfo(data) {
			vk.callFunction({
				url: "client/user.updateUserBaseInfo",
				title: "请求中...",
				data
			})
		}, 
		// 修改头像
		updateAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ["compressed"],
				sourceType: ["album"],
				success: res => {
					vk.uploadFile({
						title: "上传中...",
						filePath: res.tempFilePaths[0],
						suffix: "png",
						provider: "unicloud",
						success: res => {
							this.setAvatar(res.url)
						}
					})
				}
			})
		},
		setAvatar(avatar) {
			vk.userCenter.setAvatar({
				data: {
					avatar
				},
				success: data => {
					// 成功后的逻辑
					vk.toast("修改成功", "ok")
				}
			})
		}
	},
	// 监听器
	watch: {},
	// 计算属性
	computed: {}
}
</script>
<style lang="scss" scoped>
.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 20rpx;
	overflow: hidden;
}

.u-cell {
	padding: 20rpx !important;
}
</style>
